<template>
    <div class="page-row">
        <div class="box-left">
            <div class="tree-box-inner">
                <div class="btn-box">
                    <el-button icon="el-icon-search" class="btn-search" type="text" title="搜索"
                        @click="showinput=!showinput">
                    </el-button>
                </div>
                <div class="search-input" v-if="showinput">
                    <el-input size="mini" clearable placeholder="输入检索条件" v-model="filterText"></el-input>
                </div>
                <div class="treediv">
                    <el-tree :key="key" ref="tree" lazy :load="loadNode" node-key="id" highlight-current
                        :props="defaultProps" :filter-node-method="filterNode" @node-click="nodeClick">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span class="label">{{ node.label }}</span>
                            <span class="button-wrap">
                                <template v-if="node.level == 1">
                                    <span class="button add" title="新增参数分类"
                                        @click.stop="addParaType(node, data)"></span>
                                </template>
                                <template v-else>
                                    <span class="button edit" title="修改" @click.stop="editParatype(node, data)"></span>
                                    <span class="button remove" title="删除"
                                        @click.stop="() => removeParatype(node, data)"></span>
                                </template>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="box-right p-0">
            <div class="page-wrap">
                <div class="page-content p-0">
                    <div class="page-column ">
                        <!-- 表格搜索区域 -->
                        <div class="search-box">
                            <div class="search-left">
                                <el-button type="primary" :disabled="!currentNode.id" class="m-r-12" size="medium"
                                    icon="el-icon-circle-plus" @click="addPara">新增
                                </el-button>
                                <el-button size="medium" @click="mulDelete" icon="el-icon-delete"
                                    :disabled="selection.length == 0">
                                    删除
                                </el-button>
                            </div>
                            <div class="search-right">
                                <span @click="setColumn" class="search-icon" :class="selTableVisible?'activeicon':''">
                                    <i class="el-icon-setting"></i>
                                </span>
                                <!-- 列设置 -->
                                <section class="scrollBar sel-colume" v-if="selTableVisible">
                                    <h3>
                                        <el-checkbox v-model="checked" @change="selAll">全选</el-checkbox>
                                    </h3>
                                    <el-checkbox-group v-model="staffTableSel" @change="selColumnChange">
                                        <div v-for="(item,
									index) in tableData.headerData" :key="'list' + index">
                                            <el-checkbox :label="item.prop" :disabled="item.disabled">{{ item.label }}
                                            </el-checkbox>
                                        </div>
                                    </el-checkbox-group>
                                    <div class="sel-colume-button">
                                        <el-button type="text" @click="selTableBtn">确定</el-button>
                                        <el-button @click="cancelBtn" class="light-blue-btn" type="text">取消</el-button>
                                    </div>
                                </section>

                            </div>
                        </div>
                        <div class="table-box">
                            <el-table :key="tableKey" height="100%" v-loading="loading" :data="tableData.columnData"
                                @row-dblclick='detailFun' @selection-change="selectionChange">
                                <el-table-column type="selection" width="50"></el-table-column>
                                <el-table-column prop="id" label="ID" width="200" align="left" show-overflow-tooltip
                                    v-if="showColumn('id')"></el-table-column>
                                <el-table-column prop="name" label="选项名" min-width="160" align="left"
                                    v-if="showColumn('name')">
                                </el-table-column>
                                <el-table-column prop="valStr" label="选项值" min-width="160" align="left"
                                    v-if="showColumn('valStr')">
                                </el-table-column>
                                <el-table-column prop="orderNum" label="显示顺序" width="100" v-if="showColumn('orderNum')">
                                </el-table-column>
                                <el-table-column prop="pTypeLevl" label="级别" width="50" v-if="showColumn('pTypeLevl')">
                                </el-table-column>
                                <el-table-column prop="pTypeName" label="所属分类" width="100" align="left"
                                    v-if="showColumn('pTypeName')">
                                </el-table-column>
                                <el-table-column prop="keyString" label="KeyStr" width="100" align="left"
                                    show-overflow-tooltip v-if="showColumn('keyString')">
                                </el-table-column>
                                <el-table-column prop="descr" label="描述" min-width="200" align="left"
                                    show-overflow-tooltip v-if="showColumn('descr')">
                                </el-table-column>
                                <el-table-column prop="haveDefault" label="默认" width="80"
                                    v-if="showColumn('haveDefault')">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.haveDefault == 0 ? '否' : '是'}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="statusName" label="状态" width="100"
                                    v-if="showColumn('statusName')">
                                </el-table-column>
                                <el-table-column prop="haveCasc" label="是否级联" width="100" v-if="showColumn('haveCasc')">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.haveCasc == 0 ? '否' : '是'}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="创建人" prop="crtName" width="160" v-if="showColumn('crtName')">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.crtNo == null">
                                            {{scope.row.crtName}}
                                        </template>
                                        <template v-else>
                                            {{scope.row.crtName}}【{{scope.row.crtNo}}】
                                        </template>
                                    </template>
                                </el-table-column>
                                <el-table-column label="创建时间" prop="crtDt" width="160" v-if="showColumn('crtDt')">
                                    <template slot-scope="scope">
                                        {{ scope.row.crtDt | formatDttm }}
                                    </template>
                                </el-table-column>
                                <el-table-column label="修改人" prop="updName" width="160" v-if="showColumn('updName')">
                                    <template slot-scope="scope">
                                        <template v-if="scope.row.updNo == null">
                                            {{scope.row.updName}}
                                        </template>
                                        <template v-else>
                                            {{scope.row.updName}}【{{scope.row.updNo}}】
                                        </template>
                                    </template>
                                </el-table-column>
                                <el-table-column label="更新时间" prop="updDt" width="160" v-if="showColumn('updDt')">
                                    <template slot-scope="scope">
                                        {{ scope.row.updDt | formatDttm }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="operation" label="操作" width="130" fixed="right">
                                    <template slot-scope="scope">
                                        <el-button type="text" @click="detailFun(scope.row)">明细</el-button>
                                        <el-button type="text" @click="editFun(scope.row)">编辑</el-button>
                                        <el-button type="text" @click="deleteFun(scope.row.id)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="pagination">
                            <el-pagination :page-sizes="[5,10,15,30,50]" :page-size="tableData.pageSize"
                                layout="sizes,total,prev,pager,next" :total="tableData.total"
                                :current-page="tableData.currentPage" @current-change="handleCurrentChange"
                                @size-change="handleSizeChange">
                            </el-pagination>
                        </div>
                        <new-paratype ref="type" :treeNode="treeNode" @refresh="refreshTree"></new-paratype>
                        <new-para ref="new" :treeNode="treeNode" :currentNode="currentNode" @refresh="queryParaList">
                        </new-para>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import newParatype from './newParatype';
    import newPara from './newPara';
    import {
        commPara,
        columnSet,
        auth
    } from '@/mixins/mixins';
    import {
        queryAppList,
        queryParaClass,
        deleteParaTypeById,
        queryParaList,
        deleteParaById
    } from '../service.js';
    export default {
        name: 'sysPara', // 系统参数
        props: {
            treeNode: { // 系统对象
                type: Object,
                default () {
                    return {}
                }
            },
            moduCode: { // 模块code
                type: String,
                default: ''
            }
        },
        components: {
            newParatype,
            newPara
        },
        mixins: [commPara, columnSet, auth],
        data() {
            return {
                key: 0,
                showinput: false,
                treeData: [],
                filterText: '',
                defaultProps: {
                    label: 'name',
                    isLeaf: 'isLeaf'
                },
                currentNode: {},
                tableData: {
                    columns: 'orderNum',
                    orders: 'ASC',
                    currentPage: 1,
                    pageSize: 15,
                    total: 0,
                    columnData: [],
                    headerData: [{
                            label: 'ID',
                            prop: 'id',
                            isShow: false,
                        }, {
                            label: '参数名',
                            prop: 'name',
                            isShow: true,
                            disabled: true
                        },
                        {
                            label: '参数值',
                            prop: 'valStr',
                            isShow: true
                        },
                        {
                            label: '显示顺序',
                            prop: 'orderNum',
                            isShow: true
                        },
                        {
                            label: '级别',
                            prop: 'pTypeLevl',
                            isShow: false
                        },
                        {
                            label: '所属分类',
                            prop: 'pTypeName',
                            isShow: false
                        },
                        {
                            label: 'KeyStr',
                            prop: 'keyString',
                            isShow: false
                        },
                        {
                            label: '描述',
                            prop: 'descr',
                            isShow: false
                        },
                        {
                            label: '默认',
                            prop: 'haveDefault',
                            isShow: true
                        },
                        {
                            label: '状态',
                            prop: 'statusName',
                            isShow: true
                        },
                        {
                            label: '是否级联',
                            prop: 'haveCasc',
                            isShow: false
                        },
                        {
                            label: '创建人',
                            prop: 'crtName',
                            isShow: false
                        },
                        {
                            label: '创建时间',
                            prop: 'crtDt',
                            isShow: false
                        },
                        {
                            label: '修改人',
                            prop: 'updName',
                            isShow: false
                        },
                        {
                            label: '更新时间',
                            prop: 'updDt',
                            isShow: true
                        },
                    ]
                },
                selection: [],
                loading: false,
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
        },
        methods: {
            loadNode(node, resolve) {
                if (node.level == 0) {
                    let params = {
                        typeCode: 'APPLICATION',
                        sysId: this.treeNode.id,
                        columns: 'orderNo',
                        orders: 'ASC'
                    }
                    queryAppList(params).then(res => {
                        if (res.data.code == 1000) {
                            let data = res.data.data;
                            if (Array.isArray(data)) {
                                resolve(data)
                            } else {
                                resolve([])
                            }
                        }
                    }).catch(error => {
                        resolve([])
                    })
                } else if (node.level == 1) {
                    let params = {
                        // sysCode: node.data.sysId,
                        moduCode: node.data.id,
                        typeId: 'SYS'
                    }
                    queryParaClass(params).then(res => {
                        if (res.data.code == 1000) {
                            let data = res.data.data;
                            if (Array.isArray(data)) {
                                data = data.map(item => {
                                    return {
                                        ...item,
                                        isLeaf: true
                                    }
                                })
                                resolve(data);
                            } else {
                                resolve([])
                            }
                        }
                    }).catch(error => {
                        resolve([])
                    })
                } else {
                    resolve([])
                }
            },
            refreshTree() {
                this.key++;
            },
            filterNode(value, data) { // 节点过滤
                if (!value) return true;
                return data.name.indexOf(value) !== -1;
            },
            addParaType(node, data) { // 新增参数分类
                this.$refs.type.showLayout(data);
            },
            editParatype(node, data) { // 修改参数分类
                this.$refs.type.showEdit(data);
            },
            removeParatype(node, data) { // 删除参数分类
                this.$confirm('确认删除该参数分类？删除后将不能恢复！', {
                    title: '提示',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        id: data.id
                    }
                    deleteParaTypeById(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '删除成功！'
                            })
                            this.refreshTree();
                        }
                    })
                })
            },
            nodeClick(data, node) { // 节点点击事件
                if (node.level == 2) {
                    this.currentNode = data;
                    this.tableData.currentPage = 1;
                    this.queryParaList();
                } else {
                    this.currentNode = {};
                    this.tableData.columnData = [];
                    this.tableData.total = 0;
                }
            },
            queryParaList() { // 查询参数列表
                let params = {
                    paramType: this.currentNode.code,
                    columns: this.tableData.columns,
                    orders: this.tableData.orders,
                    startRow: this.tableData.currentPage,
                    rowSize: this.tableData.pageSize,
                    // sysCode: this.treeNode.id
                }
                this.loading = true;
                queryParaList(params).then(res => {
                    if (res.data.code == 1000) {
                        let data = res.data.data;
                        if (Array.isArray(data.data)) {
                            this.tableData.columnData = [...data.data];
                            this.tableData.total = data.total;
                        } else {
                            this.tableData.columnData = [];
                            this.tableData.total = 0;
                        }
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },
            detailFun(row) {
                this.$refs.new.showDetail(row);
            },
            addPara() {
                this.$refs.new.showLayout();
            },
            mulDelete() {
                let ids = this.selection.map(item => item.id).join();
                this.deleteFun(ids);
            },
            editFun(row) {
                this.$refs.new.showEdit(row);
            },
            deleteFun(ids) {
                this.$confirm('确认删除选中的参数，删除后将不能恢复！', {
                    title: '提示',
                    type: 'warning'
                }).then(() => {
                    let params = {
                        ids: ids
                    }
                    deleteParaById(params).then(res => {
                        if (res.data.code == 1000) {
                            this.$notify({
                                title: '提示',
                                type: 'success',
                                message: '删除成功！'
                            })
                            this.queryParaList();
                        }
                    })
                })
            },
            selectionChange(selection) {
                this.selection = selection;
            },
            handleCurrentChange(val) {
                this.tableData.currentPage = val;
                this.queryParaList();
            },
            handleSizeChange(val) {
                this.tableData.currentPage = 1;
                this.tableData.pageSize = val;
                this.queryParaList();
            },
        }
    }
</script>

<style lang="scss" scoped>
    .sys-para {
        height: 100%;
        display: flex;

        .left {
            width: 240px;
            border-right: 1px solid #e4e7ed;
            padding-right: 10px;

            .inner-wrap {
                height: 100%;
                display: flex;
                flex-direction: column;

                .btn-box {
                    padding: 5px;
                    text-align: right;

                    /deep/ {
                        .el-button--text {
                            padding: 0;

                            i {
                                font-size: 14px;
                            }
                        }
                    }
                }

                .search-bar {
                    margin-bottom: 5px;
                }

                .tree-box {
                    flex: 1;
                    background: #fff;
                    overflow: auto;

                    /deep/ {
                        .el-tree {
                            display: inline-block !important;
                            min-width: 100%;
                        }
                    }
                }
            }
        }

        .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-left: 10px;
            overflow: hidden;

            .table-wrap {
                flex: 1;
                overflow: hidden;
            }
        }
    }
</style>